<script setup>
import { ref, computed, reactive } from 'vue';
import { showFailToast } from 'vant';
import todoListItem from '@/component/todoListItem.vue';
import { reqInquirePublicClassNote } from '@/api/teacher/record/publicClass';

// 表单ref
const formRef = ref();

// 表单数据
const classNote = ref({
    classType: '',
    selectTime: '',
    teacherName: ''
});

// 表单验证
const rules = reactive({
    selectTime: [
        {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
        }
    ]
});

// 类型选项
const classTypeOption = [
    {
        value: '',
        label: '全部'
    },
    {
        value: '0',
        label: '待审核'
    },
    {
        value: '1',
        label: '已通过'
    },
    {
        value: '2',
        label: '未通过'
    }
];

// 下拉加载
const load = () => {
    loading.value = true;
    if (list.value.length) {
        inquire();
    }
};

// 是否显示加载中
const loading = ref(false);

// 是否提示todolist没有更多数据
const noMore = ref(true);

// 在加载时和没有数据的时候不能继续使用下拉加载
// (可以理解为在加载时和没多数据时不能使用load方法)
const disabled = computed(() => loading.value || noMore.value);

const list = ref([]);

let pageNo = 1;

const activeName = ref('1');

// 点击查询按钮
const inquireHandler = async formEl => {
    if (!formEl) return;
    await formEl.validate(async valid => {
        if (valid) {
            pageNo = 1;
            list.value = [];
            await inquire();
        }
    });
};

// 查询
const inquire = async () => {
    loading.value = true;
    noMore.value = false;

    try {
        const result = await reqInquirePublicClassNote({
            pageNo,
            pageSize: 10,
            day: classNote.value.selectTime,
            status: classNote.value.classType,
            name: classNote.value.teacherName
        });

        if (result.status == 200) {
            if (result.dataList) {
                if (result.dataList.length < 5) {
                    noMore.value = true;
                }

                list.value.push(...result.dataList);
            } else {
                noMore.value = true;
            }
        } else {
            noMore.value = true;
            throw new Error(result.statusText || '未找到');
        }
    } catch (e) {
        showFailToast(e.message);
    }

    loading.value = false;
    pageNo++;
};
</script>

<template>
    <div class="container">
        <el-collapse v-model="activeName" class="collapse">
            <el-collapse-item name="1">
                <template #title>
                    <span class="collapse__title"> 筛选 </span>
                </template>
                <el-form
                    label-width="60rem"
                    :model="classNote"
                    :rules="rules"
                    ref="formRef"
                >
                    <el-form-item label="类型" prop="classType">
                        <el-select
                            v-model="classNote.classType"
                            size="large"
                            class="leaveType input"
                            placeholder="请选择类型"
                        >
                            <el-option
                                v-for="option in classTypeOption"
                                :key="option.value"
                                :label="option.label"
                                :value="option.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间" prop="selectTime">
                        <el-date-picker
                            v-model="classNote.selectTime"
                            size="large"
                            class="selectTime input"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                            :editable="false"
                            validate-event
                            placeholder="请选择日期"
                        />
                    </el-form-item>
                    <el-form-item label="名字" prop="teacherName">
                        <el-input
                            class="input"
                            size="large"
                            v-model="classNote.teacherName"
                            :default-value="new Date()"
                            placeholder="请输入老师名字"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="inquireHandler(formRef)">
                    查询
                </el-button>
            </el-collapse-item>
        </el-collapse>
        <div class="content">
            <ul
                class="todoList"
                v-infinite-scroll="load"
                :infinite-scroll-disabled="disabled"
                infinite-scroll-distance="10"
            >
                <todoListItem :publicClassroomList="list"></todoListItem>
                <div v-if="loading" class="loading" v-loading="loading"></div>
                <div v-if="noMore" class="no-more">没有更多数据了</div>
            </ul>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: rgb(247, 247, 247);
}

.input {
    width: 100%;
}

.collapse {
    margin: 0 20rem;
    z-index: 999;

    &__title {
        font-size: 18rem;
        font-weight: 600;
    }
}

.content {
    position: relative;
    flex: 1;
    font-size: 10rem;
    overflow: auto;
}

.todoList {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 20rem;
    overflow: auto;
    padding: 0 20rem;
    padding-top: 5rem;

    .loading {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10rem;
        font-size: large;
        margin-top: 20rem;
        background-color: #bbb;
    }

    .no-more {
        width: 100%;
        height: 10rem;
        margin-top: 20rem;
        font-size: 14rem;
        color: #999;
        text-align: center;
    }
}
</style>
